import Config from '../utils/Config.js';

/**
 * 游戏主区域组件
 * 显示主要的卡片布局和游戏交互区域
 */
export default class GameBoard {
    constructor(uiManager) {
        this.uiManager = uiManager;
        this.layout = null;
        this.cards = [];
        this.draggedCard = null;
        this.isDragging = false;
        
        // 底部计算区域配置
        this.bottomCalculationArea = {
            maxItems: 10, // 最多显示10个槽位
            slots: [], // 固定10个槽位（前9个为数字槽位，第10个为等号槽位）
            images: {
                background: null, // icon_fh.png - 卡牌背景
                defaultPattern: null,  // dy.png - 默认图案（等号）
                numberPlaceholder: null // icon_num.png - 数字槽位占位符
            }
        };
        
        // 中央卡牌区域配置
        this.centralCardArea = {
            cards: [], // 卡牌数据
            images: {
                number: null,    // icon_num.png - 数字卡牌
                background: null, // icon_bg.png - 遮挡背景
                symbol: null,     // icon_fh.png - 符号卡牌
                patterns: []      // image0.png - image10.png - 卡牌图案
            },
            layout: {
                cardWidth: 69,   // 卡牌宽度（原图尺寸）
                cardHeight: 108, // 卡牌高度（原图尺寸）
                offsetX: 15,     // 水平偏移（适应长方形布局）
                offsetY: 10,     // 垂直偏移（适应更高卡牌）
                rows: 3,         // 3行（减少行数适应横屏）
                cols: 6,         // 6列（增加列数，长方形布局）
                stackDepth: 3    // 每个位置最多叠加3张卡牌
            }
        };
        
        // 加载底部计算区域图片
        this.loadBottomAreaImages();
        
        // 加载中央卡牌区域图片
        this.loadCentralCardImages();
        
        // 初始化中央卡牌数据
        this.initCentralCardData();
        
        // 立即初始化底部区域槽位（防止在setLayout之前访问）
        this.initBottomCalculationArea();
    }

    /**
     * 设置布局
     */
    setLayout(layout) {
        this.layout = layout;
        this.calculateCardPositions();
        this.initBottomCalculationArea();
        console.log('游戏主区域布局设置:', layout);
    }

    /**
     * 初始化底部计算区域数据
     */
    initBottomCalculationArea() {
        // 初始化10个固定槽位
        this.bottomCalculationArea.slots = [];
        
        // 前9个槽位：数字/运算符槽位（空占位符）
        for (let i = 0; i < 9; i++) {
            this.bottomCalculationArea.slots.push({
                slotIndex: i,
                isEmpty: true,
                slotType: 'number',
                placeholderImage: this.bottomCalculationArea.images.numberPlaceholder,
                backgroundImage: this.bottomCalculationArea.images.background
            });
        }
        
        // 第10个槽位：等号槽位（固定显示等号图案）
        this.bottomCalculationArea.slots.push({
            slotIndex: 9,
            isEmpty: true, // 等号槽位始终显示，但标记为空（不参与计算）
            slotType: 'symbol',
            isEqualSign: true, // 标记为等号槽位
            placeholderImage: this.bottomCalculationArea.images.background,
            patternImage: this.bottomCalculationArea.images.defaultPattern,
            backgroundImage: this.bottomCalculationArea.images.background
        });
        
        console.log('底部计算区域初始化完成，显示10个槽位（9个空槽位 + 1个等号）');
    }

    /**
     * 添加卡牌到底部计算区域（从中央区域下放）
     * 实现数字和符号的交替放置规则：
     * - 数字卡牌：放在奇数位置（索引0,2,4,6,8 对应位置1,3,5,7,9）
     * - 符号卡牌：放在偶数位置（索引1,3,5,7 对应位置2,4,6,8）
     */
    addCardToBottomArea(card) {
        // 检查slots数组是否已初始化
        if (!this.bottomCalculationArea.slots || this.bottomCalculationArea.slots.length === 0) {
            console.error('[添加卡牌] 底部区域槽位未初始化');
            return false;
        }
        
        // 判断卡牌类型：数字 or 符号
        const isNumberCard = typeof card.value === 'number';
        const cardType = isNumberCard ? '数字' : '符号';
        
        // 根据卡牌类型确定可用的位置索引
        let availablePositions;
        if (isNumberCard) {
            // 数字卡牌：奇数位置（索引0,2,4,6,8）
            availablePositions = [0, 2, 4, 6, 8];
        } else {
            // 符号卡牌：偶数位置（索引1,3,5,7）
            availablePositions = [1, 3, 5, 7];
        }
        
        // 查找第一个空的可用位置
        let emptySlotIndex = -1;
        for (let pos of availablePositions) {
            const slot = this.bottomCalculationArea.slots[pos];
            if (slot && slot.isEmpty && !slot.isEqualSign) {
                emptySlotIndex = pos;
                break;
            }
        }
        
        // 如果没有找到空位置
        if (emptySlotIndex === -1) {
            console.log(`[添加卡牌] 无法添加${cardType}卡牌 ${card.value}：所有${cardType}位置已满`);
            console.log(`[添加卡牌] ${cardType}卡牌可用位置：${availablePositions.map(i => `位置${i+1}`).join(', ')}`);
            return false;
        }
        
        // 获取空槽位并填充数据
        const slot = this.bottomCalculationArea.slots[emptySlotIndex];
        slot.isEmpty = false;
        slot.type = card.type;
        slot.value = card.value;
        slot.patternIndex = card.patternIndex;
        slot.patternImage = card.patternImage;
        slot.originalCard = card; // 保存原卡牌引用
        
        console.log(`[添加卡牌] ${cardType}卡牌 ${card.value} 已放置到位置${emptySlotIndex + 1}（槽位索引${emptySlotIndex}）`);
        return true;
    }





    /**
     * 初始化中央卡牌数据（羊了个羊风格 - 16个基础位置）
     */
    initCentralCardData() {
        // 模拟数据：48个元素，每个元素包含数值和图案索引
        const mockData = [
            // 第1层 (0-15) - 数值和图案索引
            {value: '+', pattern: 0}, {value: 2, pattern: 1}, {value: 3, pattern: 2}, {value: 4, pattern: 3},
            {value: 5, pattern: 4}, {value: 6, pattern: 5}, {value: 7, pattern: 6}, {value: 17, pattern: 7},
            {value: 23, pattern: 8}, {value: 5, pattern: 9}, {value: 2, pattern: 10}, {value: 1, pattern: 0},
            {value: '+', pattern: 1}, {value: '-', pattern: 2}, {value: 3, pattern: 3}, {value: '+', pattern: 4},
            
            // 第2层 (16-31)
            {value: 2, pattern: 5}, {value: 3, pattern: 6}, {value: 4, pattern: 7}, {value: 5, pattern: 8},
            {value: 6, pattern: 9}, {value: 7, pattern: 10}, {value: 17, pattern: 0}, {value: 23, pattern: 1},
            {value: 5, pattern: 2}, {value: 2, pattern: 3}, {value: 1, pattern: 4}, {value: '+', pattern: 5},
            {value: '-', pattern: 6}, {value: 3, pattern: 7}, {value: '+', pattern: 8}, {value: 8, pattern: 9},
            
            // 第3层 (32-47)
            {value: 1, pattern: 10}, {value: 19, pattern: 0}, {value: 11, pattern: 1}, {value: 12, pattern: 2},
            {value: 13, pattern: 3}, {value: 14, pattern: 4}, {value: 15, pattern: 5}, {value: 16, pattern: 6},
            {value: '+', pattern: 7}, {value: '-', pattern: 8}, {value: 19, pattern: 9}, {value: 9, pattern: 10},
            {value: 21, pattern: 0}, {value: 22, pattern: 1}, {value: 2, pattern: 2}, {value: 24, pattern: 3}
        ];
        
        this.centralCardArea.cards = [];
        const layout = this.centralCardArea.layout;
        
        // 计算中央区域的起始位置（完全居中）
        const screenWidth = 1334;
        const screenHeight = 750;
        
        const totalWidth = layout.cols * layout.cardWidth + (layout.cols - 1) * layout.offsetX;
        const totalHeight = layout.rows * layout.cardHeight + (layout.rows - 1) * layout.offsetY;
        
        const startX = (screenWidth - totalWidth) / 2;
        const startY = (screenHeight - totalHeight) / 2 - 60; // 向上偏移
        
        // 生成卡牌数据 - 羊了个羊不规则叠加风格
        for (let i = 0; i < mockData.length; i++) {
            const cardData = mockData[i];
            const value = cardData.value;
            const patternIndex = cardData.pattern;
            
            // 计算基础网格位置（16个位置循环使用）
            const gridIndex = i % (layout.rows * layout.cols);
            const baseRow = Math.floor(gridIndex / layout.cols);
            const baseCol = gridIndex % layout.cols;
            
            // 计算叠加层级
            const stackLevel = Math.floor(i / (layout.rows * layout.cols));
            
            // 羊了个羊风格：不规则偏移，实现一张遮挡多张的效果
            let stackOffsetX, stackOffsetY;
            
            if (stackLevel === 0) {
                // 底层卡牌：基础位置
                stackOffsetX = 0;
                stackOffsetY = 0;
            } else {
                // 上层卡牌：更大范围的不规则偏移，可以跨越多个网格位置
                const randomSeedX = (gridIndex * 7 + stackLevel * 3) % 5; // 0-4的随机种子
                const randomSeedY = (gridIndex * 11 + stackLevel * 5) % 4; // 0-3的随机种子
                
                // 更大的偏移范围，让一张卡牌可以覆盖2-3张卡牌
                const randomFactorX = (randomSeedX - 2) * 15; // -30, -15, 0, 15, 30的偏移
                const randomFactorY = (randomSeedY - 1.5) * 12; // -18, -6, 6, 18的偏移
                
                stackOffsetX = randomFactorX + stackLevel * 8; // 增大基础偏移
                stackOffsetY = randomFactorY + stackLevel * 6; // 增大基础偏移
            }
            
            const x = startX + baseCol * (layout.cardWidth + layout.offsetX) + stackOffsetX;
            const y = startY + baseRow * (layout.cardHeight + layout.offsetY) + stackOffsetY;
            
            // 判断卡牌类型
            let cardType, image;
            if (typeof value === 'number') {
                cardType = 'number';
                image = this.centralCardArea.images.number;
            } else {
                cardType = 'symbol';
                image = this.centralCardArea.images.symbol;
            }
            
            // 检查卡牌是否被遮挡（羊了个羊逻辑：基于实际位置重叠判断）
            const isBlocked = false; // 先设为false，后面会重新计算遮挡关系
            
            // 创建卡牌对象
            this.centralCardArea.cards.push({
                id: i,
                value: value,
                type: cardType,
                patternIndex: patternIndex, // 图案索引
                x: x,
                y: y,
                width: layout.cardWidth,
                height: layout.cardHeight,
                image: image,
                patternImage: this.centralCardArea.images.patterns[patternIndex], // 图案图片
                backgroundImage: this.centralCardArea.images.background,
                isVisible: true,        // 所有卡牌都显示内容
                isSelectable: !isBlocked, // 被遮挡的卡牌不能选中
                isBlocked: isBlocked,   // 是否被遮挡
                zIndex: i,              // 层级，后面的卡牌在上层
                baseRow: baseRow,       // 基础行位置
                baseCol: baseCol,       // 基础列位置
                stackLevel: stackLevel, // 叠加层级
                gridIndex: gridIndex    // 网格索引
            });
        }
        
        // 重新计算所有卡牌的遮挡关系（基于实际位置重叠）
        this.updateCardBlockingStates();
        
        // 统计遮挡情况
        this.logBlockingStatistics();
        
        console.log('中央卡牌数据初始化完成（羊了个羊风格-16基础位置），共', this.centralCardArea.cards.length, '张卡牌');
    }

    /**
     * 更新卡牌遮挡状态（基于实际位置重叠）
     */
    updateCardBlockingStates() {
        const cards = this.centralCardArea.cards;
        
        // 重置所有卡牌的遮挡状态
        cards.forEach(card => {
            card.isBlocked = false;
            card.isSelectable = true;
            card.blockedByCards = []; // 记录被哪些卡牌遮挡
            card.blockingCards = []; // 记录遮挡了哪些卡牌
        });
        
        // 检查每张卡牌是否被其他卡牌遮挡
        for (let i = 0; i < cards.length; i++) {
            const currentCard = cards[i];
            
            for (let j = 0; j < cards.length; j++) {
                if (i === j) continue;
                
                const otherCard = cards[j];
                
                // 只有层级更高的卡牌才能遮挡当前卡牌
                if (otherCard.zIndex > currentCard.zIndex) {
                    // 检查两张卡牌是否有重叠
                    if (this.isCardsOverlapping(currentCard, otherCard)) {
                        currentCard.isBlocked = true;
                        currentCard.isSelectable = false;
                        currentCard.blockedByCards.push(otherCard.id);
                        otherCard.blockingCards.push(currentCard.id);
                    }
                }
            }
        }
    }

    /**
     * 统计并输出遮挡情况
     */
    logBlockingStatistics() {
        const cards = this.centralCardArea.cards;
        
        console.log('=== 遮挡统计 ===');
        
        // 统计每张卡牌遮挡了多少张其他卡牌
        const blockingStats = [];
        cards.forEach(card => {
            if (card.blockingCards && card.blockingCards.length > 0) {
                blockingStats.push({
                    cardId: card.id,
                    value: card.value,
                    stackLevel: card.stackLevel,
                    blockingCount: card.blockingCards.length,
                    blockingCards: card.blockingCards
                });
            }
        });
        
        // 按遮挡数量排序
        blockingStats.sort((a, b) => b.blockingCount - a.blockingCount);
        
        console.log('遮挡其他卡牌的情况：');
        blockingStats.forEach(stat => {
            console.log(`卡牌${stat.cardId}(${stat.value}) L${stat.stackLevel} 遮挡了 ${stat.blockingCount} 张卡牌: [${stat.blockingCards.join(', ')}]`);
        });
        
        // 统计被遮挡的卡牌
        const blockedCards = cards.filter(card => card.isBlocked);
        const selectableCards = cards.filter(card => card.isSelectable);
        
        console.log(`总卡牌数: ${cards.length}`);
        console.log(`被遮挡卡牌: ${blockedCards.length}`);
        console.log(`可选中卡牌: ${selectableCards.length}`);
        console.log(`遮挡比例: ${(blockedCards.length / cards.length * 100).toFixed(1)}%`);
    }

    /**
     * 检查两张卡牌是否重叠（支持一张遮挡多张）
     */
    isCardsOverlapping(card1, card2) {
        // 降低重叠面积阈值，让一张卡牌更容易遮挡多张卡牌
        const overlapThreshold = 0.25; // 从50%降低到25%
        const minOverlapArea = Math.min(card1.width * card1.height, card2.width * card2.height) * overlapThreshold;
        
        // 计算重叠区域
        const left = Math.max(card1.x, card2.x);
        const right = Math.min(card1.x + card1.width, card2.x + card2.width);
        const top = Math.max(card1.y, card2.y);
        const bottom = Math.min(card1.y + card1.height, card2.y + card2.height);
        
        // 如果没有重叠
        if (left >= right || top >= bottom) {
            return false;
        }
        
        // 计算重叠面积
        const overlapArea = (right - left) * (bottom - top);
        
        // 判断重叠面积是否超过阈值
        return overlapArea >= minOverlapArea;
    }

    /**
     * 检查卡牌是否被遮挡（叠加风格）
     */
    isCardBlockedInStack(cardIndex, baseRow, baseCol, stackLevel, totalCards, layout) {
        // 最顶层的卡牌永远不被遮挡
        if (stackLevel === Math.floor((totalCards - 1) / (layout.rows * layout.cols))) {
            return false;
        }
        
        // 检查是否有更高层级的卡牌在同一网格位置
        const gridSize = layout.rows * layout.cols;
        const currentGridIndex = baseRow * layout.cols + baseCol;
        
        // 检查更高层级是否有卡牌
        for (let level = stackLevel + 1; level <= Math.floor((totalCards - 1) / gridSize); level++) {
            const upperCardIndex = level * gridSize + currentGridIndex;
            if (upperCardIndex < totalCards) {
                return true; // 被上层卡牌遮挡
            }
        }
        
        return false;
    }

    

    /**
     * 检查卡牌是否被遮挡（羊了羊逻辑）- 保留原方法
     */
    isCardBlocked(cardIndex, row, col, layout) {
        // 最上层的卡牌永远不被遮挡
        if (row === 0) return false;
        
        // 检查上方是否有卡牌遮挡
        // 羊了羊规则：如果上方有卡牌，则当前卡牌被遮挡
        const upperRow = row - 1;
        const upperCardIndex = upperRow * layout.cols + col;
        
        // 如果上方位置有卡牌，则当前卡牌被遮挡
        return upperCardIndex >= 0;
    }



    /**
     * 加载底部计算区域图片
     */
    loadBottomAreaImages() {
        // 加载卡牌背景图片（icon_fh.png）
        this.bottomCalculationArea.images.background = wx.createImage();
        this.bottomCalculationArea.images.background.onload = () => {
            console.log('底部卡牌背景加载完成');
        };
        this.bottomCalculationArea.images.background.onerror = () => {
            console.log('底部卡牌背景加载失败');
        };
        this.bottomCalculationArea.images.background.src = 'images/icon_fh.png';

        // 加载默认图案（dy.png - 等号）
        this.bottomCalculationArea.images.defaultPattern = wx.createImage();
        this.bottomCalculationArea.images.defaultPattern.onload = () => {
            console.log('底部默认图案加载完成');
        };
        this.bottomCalculationArea.images.defaultPattern.onerror = () => {
            console.log('底部默认图案加载失败');
        };
        this.bottomCalculationArea.images.defaultPattern.src = 'images/dy.png';
        
        // 加载数字槽位占位符（icon_num.png）
        this.bottomCalculationArea.images.numberPlaceholder = wx.createImage();
        this.bottomCalculationArea.images.numberPlaceholder.onload = () => {
            console.log('底部数字占位符加载完成');
        };
        this.bottomCalculationArea.images.numberPlaceholder.onerror = () => {
            console.log('底部数字占位符加载失败');
        };
        this.bottomCalculationArea.images.numberPlaceholder.src = 'images/icon_num.png';
    }



    /**
     * 加载中央卡牌区域的图片资源
     */
    loadCentralCardImages() {
        // 加载数字卡牌背景
        this.centralCardArea.images.number = wx.createImage();
        this.centralCardArea.images.number.onload = () => {
            console.log('数字卡牌背景加载完成');
        };
        this.centralCardArea.images.number.src = 'images/icon_num.png';
        
        // 加载符号卡牌背景
        this.centralCardArea.images.symbol = wx.createImage();
        this.centralCardArea.images.symbol.onload = () => {
            console.log('符号卡牌背景加载完成');
        };
        this.centralCardArea.images.symbol.src = 'images/icon_fh.png';
        
        // 加载遮挡背景
        this.centralCardArea.images.background = wx.createImage();
        this.centralCardArea.images.background.onload = () => {
            console.log('遮挡背景加载完成');
        };
        this.centralCardArea.images.background.src = 'images/icon_bg.png';
        
        // 加载卡牌图案（image0.png到image10.png）
        this.centralCardArea.images.patterns = [];
        for (let i = 0; i <= 10; i++) {
            const patternImage = wx.createImage();
            patternImage.onload = () => {
                console.log(`图案${i}加载完成`);
            };
            patternImage.src = `images/image${i}.png`;
            this.centralCardArea.images.patterns[i] = patternImage;
        }
        
        console.log('开始加载中央卡牌图片资源（包含11个图案）');
    }



    /**
     * 计算卡片位置
     */
    calculateCardPositions() {
        if (!this.layout) return;
        
        const gameManager = this.getGameManager();
        if (!gameManager || !gameManager.cardManager) return;
        
        const mainCards = gameManager.cardManager.getAllCards()
            .filter(card => card.area === 'main');
        
        // 根据卡片的行列信息计算位置
        const cardWidth = Config.CARD.WIDTH;
        const cardHeight = Config.CARD.HEIGHT;
        const cardMargin = Config.CARD.MARGIN;
        
        // 计算起始位置，使卡片布局居中
        const totalCols = 6;
        const totalRows = 4;
        const totalWidth = totalCols * (cardWidth + cardMargin) - cardMargin;
        const totalHeight = totalRows * (cardHeight + cardMargin) - cardMargin;
        
        const startX = this.layout.x + (this.layout.width - totalWidth) / 2;
        const startY = this.layout.y + (this.layout.height - totalHeight) / 2;
        
        mainCards.forEach(card => {
            if (card.row !== undefined && card.col !== undefined) {
                card.x = startX + card.col * (cardWidth + cardMargin);
                card.y = startY + card.row * (cardHeight + cardMargin);
                card.width = cardWidth;
                card.height = cardHeight;
            }
        });
    }

    /**
     * 渲染组件
     */
    render(ctx) {
        if (!this.layout) return;

        const { x, y, width, height } = this.layout;
        
        // 绘制背景
        this.drawBackground(ctx, x, y, width, height);
        
        // 绘制中央卡牌区域
        this.drawCentralCardArea(ctx);
        
        // 绘制底部计算区域
        this.drawBottomCalculationArea(ctx);
    }

    /**
     * 绘制背景
     */
    drawBackground(ctx, x, y, width, height) {
        // 游戏区域不绘制背景，与其他区域保持一致，实现视觉统一
        // 移除背景和边框绘制，与游戏主背景无缝融合
    }

    /**
     * 绘制卡片
     */
    drawCards(ctx) {
        const gameManager = this.getGameManager();
        if (!gameManager || !gameManager.cardManager) return;
        
        const mainCards = gameManager.cardManager.getAllCards()
            .filter(card => card.area === 'main' && card.visible);
        
        // 先绘制未选中的卡片
        mainCards.filter(card => !card.selected).forEach(card => {
            this.drawCard(ctx, card);
        });
        
        // 再绘制选中的卡片（显示在上层）
        mainCards.filter(card => card.selected).forEach(card => {
            this.drawCard(ctx, card);
        });
    }

    /**
     * 绘制单张卡片
     */
    drawCard(ctx, card) {
        const { x, y, width, height } = card;
        
        // 保存当前状态
        ctx.save();
        
        // 如果是选中状态，添加发光效果
        if (card.selected) {
            ctx.shadowColor = Config.COLORS.PRIMARY;
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
        }
        
        // 卡片背景
        ctx.fillStyle = card.selected ? Config.COLORS.CARD_SELECTED : Config.COLORS.CARD_BG;
        this.drawRoundedRect(ctx, x, y, width, height, Config.CARD.BORDER_RADIUS);
        ctx.fill();
        
        // 卡片边框
        ctx.strokeStyle = card.selected ? Config.COLORS.PRIMARY : '#DDDDDD';
        ctx.lineWidth = card.selected ? 3 : 2;
        ctx.stroke();
        
        // 恢复状态（移除阴影）
        ctx.restore();
        
        // 绘制卡片内容
        this.drawCardContent(ctx, card, x, y, width, height);
    }

    /**
     * 绘制卡片内容
     */
    drawCardContent(ctx, card, x, y, width, height) {
        // 卡片数字
        ctx.fillStyle = Config.COLORS.TEXT_PRIMARY;
        ctx.font = 'bold 28px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(card.value.toString(), x + width/2, y + height/2 + 10);
        
        // 卡片装饰（可以根据数值显示不同颜色或图案）
        const decorationColor = this.getCardDecorationColor(card.value);
        ctx.fillStyle = decorationColor;
        ctx.fillRect(x + 5, y + 5, width - 10, 8);
        
        // 调试信息（可选）
        if (false) { // 设为true可显示调试信息
            ctx.fillStyle = Config.COLORS.TEXT_SECONDARY;
            ctx.font = '10px Arial';
            ctx.fillText(`${card.row},${card.col}`, x + width/2, y + height - 5);
        }
    }

    /**
     * 根据卡片数值获取装饰颜色
     */
    getCardDecorationColor(value) {
        const colors = [
            '#FF5722', '#E91E63', '#9C27B0', '#673AB7',
            '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',
            '#009688', '#4CAF50'
        ];
        return colors[value % colors.length];
    }



    /**
     * 绘制中央卡牌区域（羊了个羊风格 - 16个基础位置）
     */
    drawCentralCardArea(ctx) {
        if (!this.centralCardArea.cards.length) return;
        
        // 按zIndex排序，确保正确的层级显示
        const sortedCards = [...this.centralCardArea.cards].sort((a, b) => a.zIndex - b.zIndex);
        
        sortedCards.forEach(card => {
            if (card.image && card.image.complete) {
                // 保存当前绘图状态
                ctx.save();
                
                // 为叠加效果添加阴影
                if (card.stackLevel > 0) {
                    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
                    ctx.shadowBlur = 4;
                    ctx.shadowOffsetX = 2;
                    ctx.shadowOffsetY = 2;
                }
                
                // 绘制卡牌背景图片（使用原图尺寸）
                ctx.drawImage(
                    card.image,
                    card.x,
                    card.y,
                    card.width,
                    card.height
                );
                
                // 恢复绘图状态（清除阴影）
                ctx.restore();
                
                // 绘制中间的图案
                if (card.patternImage && card.patternImage.complete) {
                    const patternSize = 35; // 适应原图尺寸的图案大小
                    const patternX = card.x + (card.width - patternSize) / 2;
                    const patternY = card.y + (card.height - patternSize) / 2;
                    ctx.drawImage(card.patternImage, patternX, patternY, patternSize, patternSize);
                }
                
                // 纸牌风格：数字在左上角和右下角
                ctx.fillStyle = '#333333';
                ctx.font = 'bold 14px Arial'; // 适应原图尺寸的字体
                ctx.strokeStyle = '#FFFFFF';
                ctx.lineWidth = 2;
                
                // 左上角数字
                ctx.textAlign = 'left';
                const topLeftX = card.x + 5;
                const topLeftY = card.y + 16;
                ctx.strokeText(card.value.toString(), topLeftX, topLeftY);
                ctx.fillText(card.value.toString(), topLeftX, topLeftY);
                
                // 右下角数字（正向显示）
                ctx.textAlign = 'right';
                const bottomRightX = card.x + card.width - 5;
                const bottomRightY = card.y + card.height - 8;
                ctx.strokeText(card.value.toString(), bottomRightX, bottomRightY);
                ctx.fillText(card.value.toString(), bottomRightX, bottomRightY);
                
                // 如果卡牌被遮挡，添加半透明遮罩表示不可选中
                if (card.isBlocked) {
                    ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; // 半透明黑色遮罩
                    ctx.fillRect(card.x, card.y, card.width, card.height);
                    
                    // 添加遮挡标识
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
                    ctx.font = '12px Arial';
                    ctx.fillText('🔒', card.x + card.width - 10, card.y + 15);
                }
                
                // 可选中的卡牌添加高亮边框
                if (card.isSelectable) {
                    ctx.strokeStyle = '#4CAF50'; // 绿色边框表示可选中
                    ctx.lineWidth = 2;
                    ctx.strokeRect(card.x, card.y, card.width, card.height);
                    
                    // 添加可选中光效
                    ctx.strokeStyle = 'rgba(76, 175, 80, 0.3)';
                    ctx.lineWidth = 4;
                    ctx.strokeRect(card.x - 1, card.y - 1, card.width + 2, card.height + 2);
                }
                
                // 显示叠加层级（调试用）
                if (card.stackLevel > 0) {
                    ctx.fillStyle = 'rgba(255, 165, 0, 0.8)';
                    ctx.font = '10px Arial';
                    ctx.fillText(`L${card.stackLevel}`, card.x + 4, card.y + 12);
                }
            }
        });
    }

    /**
     * 绘制底部计算区域
     */
    drawBottomCalculationArea(ctx) {
        if (!this.layout || !this.bottomCalculationArea.slots.length) return;
        
        // 计算底部区域的高度和位置
        const bottomAreaHeight = 80; // 调整区域高度适应实际原图尺寸
        const bottomMargin = 90;
        const bottomY = this.layout.y + this.layout.height - bottomAreaHeight - bottomMargin;
        
        // 卡牌尺寸（使用实际原图尺寸60*106）
        const cardWidth = 83;  // 实际原图宽度
        const cardHeight = 130; // 实际原图高度
        const spacing = 18; // 调整间距适应实际尺寸
        
        // 计算总宽度（固定10个槽位）
        const totalWidth = 10 * cardWidth + 9 * spacing;
        
        // 计算起始X位置（完全居中）
        const startX = this.layout.x + (this.layout.width - totalWidth) / 2;
        const cardY = bottomY + (bottomAreaHeight - cardHeight) / 2;
        
        // 绘制所有10个槽位
        let currentX = startX;
        this.bottomCalculationArea.slots.forEach((slot, index) => {
            // 根据索引交替选择背景图片
            // 偶数索引(0,2,4,6,8)使用icon_num.png，奇数索引(1,3,5,7,9)使用icon_fh.png
            let backgroundImage;
            if (slot.isEqualSign) {
                // 等号槽位使用固定背景
                backgroundImage = this.bottomCalculationArea.images.background;
            } else {
                // 其他槽位根据索引交替
                backgroundImage = (index % 2 === 0) 
                    ? this.bottomCalculationArea.images.numberPlaceholder  // icon_num.png
                    : this.bottomCalculationArea.images.background;         // icon_fh.png
            }
            
            // 绘制槽位背景
            if (backgroundImage && backgroundImage.complete) {
                ctx.drawImage(backgroundImage, currentX, cardY, cardWidth, cardHeight);
            }
            
            if (slot.isEmpty) {
                // 空槽位：绘制占位符
                if (slot.isEqualSign) {
                    // 等号槽位：显示dy.png图案
                    if (slot.patternImage && slot.patternImage.complete) {
                        const patternSize = 50;
                        const patternX = currentX + (cardWidth - patternSize) / 2;
                        const patternY = cardY + (cardHeight - patternSize) / 2;
                        ctx.drawImage(slot.patternImage, patternX, patternY, patternSize, patternSize);
                    }
                } else {
                    // 数字槽位：显示空占位符（icon_num.png已作为背景）
                    // 不需要额外绘制，背景已经是icon_num.png
                }
            } else {
                // 已填充槽位：绘制卡牌内容
                // 绘制中间图案
                if (slot.patternImage && slot.patternImage.complete) {
                    const patternSize = 50;
                    const patternX = currentX + (cardWidth - patternSize) / 2;
                    const patternY = cardY + (cardHeight - patternSize) / 2;
                    ctx.drawImage(slot.patternImage, patternX, patternY, patternSize, patternSize);
                }
                
                // 纸牌风格：数字在左上角和右下角
                ctx.fillStyle = '#333333';
                ctx.font = 'bold 18px Arial';
                ctx.strokeStyle = '#FFFFFF';
                ctx.lineWidth = 3;
                
                // 左上角数字
                ctx.textAlign = 'left';
                const topLeftX = currentX + 8;
                const topLeftY = cardY + 22;
                ctx.strokeText(slot.value.toString(), topLeftX, topLeftY);
                ctx.fillText(slot.value.toString(), topLeftX, topLeftY);
                
                // 右下角数字
                ctx.textAlign = 'right';
                const bottomRightX = currentX + cardWidth - 8;
                const bottomRightY = cardY + cardHeight - 12;
                ctx.strokeText(slot.value.toString(), bottomRightX, bottomRightY);
                ctx.fillText(slot.value.toString(), bottomRightX, bottomRightY);
            }
            
            // 移动到下一个槽位位置
            currentX += cardWidth + spacing;
        });
    }



    /**
     * 绘制圆角矩形
     */
    drawRoundedRect(ctx, x, y, width, height, radius) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width - radius, y);
        ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
        ctx.lineTo(x + width, y + height - radius);
        ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
    }

    /**
     * 获取游戏管理器
     */
    getGameManager() {
        if (this.uiManager && this.uiManager.gameManager) {
            return this.uiManager.gameManager;
        }
        return null;
    }

    /**
     * 检查点是否在组件内
     */
    isPointInside(x, y) {
        if (!this.layout) {
            return false;
        }
        
        return x >= this.layout.x && 
               x <= this.layout.x + this.layout.width &&
               y >= this.layout.y && 
               y <= this.layout.y + this.layout.height;
    }

    /**
     * 处理触摸开始事件
     */
    onTouchStart(x, y) {
        // 检查中央卡牌区域点击
        if (this.checkCentralCardClick(x, y)) {
            return true;
        }
        
        // 检查底部组合区域点击
        if (this.checkBottomAreaClick(x, y)) {
            return true;
        }
        
        
        
        return false;
    }

    /**
     * 检查中央卡牌区域点击
     */
    checkCentralCardClick(x, y) {
        if (!this.centralCardArea.cards.length) return false;
        
        // 按zIndex倒序检查，优先检查上层卡牌
        const sortedCards = [...this.centralCardArea.cards].sort((a, b) => b.zIndex - a.zIndex);
        
        for (let card of sortedCards) {
            // 检查点击是否在卡牌范围内
            if (x >= card.x && x <= card.x + card.width &&
                y >= card.y && y <= card.y + card.height) {
                
                // 只有可选中的卡牌才能被点击
                if (card.isSelectable) {
                    console.log(`点击了卡牌: ${card.value} (ID: ${card.id})`);
                    this.handleCardClick(card);
                    return true;
                } else {
                    console.log(`卡牌被遮挡，无法选中: ${card.value} (ID: ${card.id})`);
                    return true; // 阻止事件继续传播
                }
            }
        }
        
        return false;
    }

    /**
     * 检查底部组合区域点击
     */
    checkBottomAreaClick(x, y) {
        if (!this.layout) {
            console.log('[BottomArea] 布局未就绪，跳过点击检测');
            return false;
        }
        if (!this.bottomCalculationArea.slots.length) return false;
        
        // 计算底部区域的位置参数（与drawBottomCalculationArea方法完全一致）
        const bottomAreaHeight = 80;
        const bottomMargin = 90;
        const bottomY = this.layout.y + this.layout.height - bottomAreaHeight - bottomMargin;
        
        // 使用与绘制方法相同的卡牌尺寸
        const cardWidth = 83;
        const cardHeight = 130;
        const spacing = 18;
        
        // 固定10个槽位
        const totalWidth = 10 * cardWidth + 9 * spacing;
        const startX = this.layout.x + (this.layout.width - totalWidth) / 2;
        const cardY = bottomY + (bottomAreaHeight - cardHeight) / 2;
        
        // 点击容差：扩大点击区域，提高点击成功率
        const clickTolerance = 10;
        
        // 检查每个槽位的点击
        let currentX = startX;
        for (let i = 0; i < this.bottomCalculationArea.slots.length; i++) {
            const slot = this.bottomCalculationArea.slots[i];
            
            // 计算槽位的实际检测区域（包含容差）
            const x1 = currentX - clickTolerance;
            const x2 = currentX + cardWidth + clickTolerance;
            const y1 = cardY - clickTolerance;
            const y2 = cardY + cardHeight + clickTolerance;
  
            // 检查点击是否在槽位范围内（包含容差）
            const hitX = x >= x1 && x <= x2;
            const hitY = y >= y1 && y <= y2;
         
            if (hitX && hitY) {
                // 等号槽位作为计算按钮：点击后执行计算
                if (slot.isEqualSign) {
                    this.handleCalculationButtonClick();
                    return true;
                }
                
                // 只处理已填充的槽位点击
                if (!slot.isEmpty) {
                    this.handleBottomCardClick(slot, i);
                    return true;
                }
                
                // 点击了空槽位，不做处理
                console.log(`[BottomArea-检测] 点击了空槽位 ${i}`);
                return false;
            }
            
            currentX += cardWidth + spacing;
        }
        
        console.log(`[BottomArea-检测] ❌ 未命中任何槽位`);
        return false;
    }

    /**
     * 处理计算按钮点击
     */
    handleCalculationButtonClick() {
        try {
            // 构建数学表达式
            const expression = this.buildExpressionFromCards();
            if (!expression) {
                console.log('无法构建有效的数学表达式');
                return;
            }
            console.log(`构建的表达式: ${expression}`);

            // 执行计算
            const result = this.calculateExpression(expression);
            if (result !== null) {
                console.log(`计算结果: ${result}`);
                this.handleCalculationResult(result, expression);
            } else {
                console.log('计算失败，表达式无效');
            }
        } catch (error) {
            console.error('计算过程中发生错误:', error);
        }
    }

    /**
     * 从底部卡牌构建数学表达式
     */
    buildExpressionFromCards() {
        // 过滤掉空槽位和等号槽位，只使用已填充的槽位
        const filledSlots = this.bottomCalculationArea.slots.filter(
            slot => !slot.isEmpty && !slot.isEqualSign
        );
        if (filledSlots.length === 0) {
            console.log('底部区域没有可计算的卡牌');
            return null;
        }

        let expression = '';
        const operators = ['+', '-', '×', '÷', '*', '/'];

        for (let i = 0; i < filledSlots.length; i++) {
            const slot = filledSlots[i];
            const value = String(slot.value).trim();

            if (value === '') {
                console.log('存在空值卡牌，忽略');
                continue;
            }

            // 数字
            if (!isNaN(value)) {
                expression += value;
                continue;
            }

            // 运算符
            if (operators.includes(value)) {
                if (value === '×') expression += '*';
                else if (value === '÷') expression += '/';
                else expression += value;
                continue;
            }

            console.log(`无效的卡牌值: ${value}`);
            return null;
        }

        // 基本合法性校验
        if (!this.validateExpression(expression)) {
            console.log(`表达式验证失败: ${expression}`);
            return null;
        }

        return expression;
    }

    /**
     * 验证数学表达式的合法性
     */
    validateExpression(expression) {
        if (!expression || expression.trim() === '') return false;
        const first = expression.charAt(0);
        const last = expression.charAt(expression.length - 1);
        if (isNaN(first) || isNaN(last)) return false;

        const ops = ['+', '-', '*', '/'];
        for (let i = 0; i < expression.length - 1; i++) {
            const a = expression.charAt(i);
            const b = expression.charAt(i + 1);
            if (ops.includes(a) && ops.includes(b)) return false;
        }

        // 简单的除零校验（/0 或 /0.0 形式）
        if (/\/0(?![0-9])/g.test(expression)) return false;
        return true;
    }

    /**
     * 安全计算数学表达式
     */
    calculateExpression(expression) {
        try {
            // 1) 词法分析：仅允许数字(含小数)与 +-*/
            const tokens = expression.match(/\d+(?:\.\d+)?|[+\-*/]/g);
            if (!tokens || !tokens.length) return null;

            // 2) Shunting-yard 转逆波兰，处理运算优先级
            const output = [];
            const opStack = [];
            const prec = { '+': 1, '-': 1, '*': 2, '/': 2 };
            const isOp = (t) => t in prec;

            for (const t of tokens) {
                if (!isNaN(t)) {
                    output.push(t);
                } else if (isOp(t)) {
                    while (opStack.length && isOp(opStack[opStack.length - 1]) && prec[opStack[opStack.length - 1]] >= prec[t]) {
                        output.push(opStack.pop());
                    }
                    opStack.push(t);
                } else {
                    // 不支持的符号
                    return null;
                }
            }
            while (opStack.length) output.push(opStack.pop());

            // 3) 计算逆波兰
            const st = [];
            for (const t of output) {
                if (!isNaN(t)) {
                    st.push(parseFloat(t));
                } else {
                    const b = st.pop();
                    const a = st.pop();
                    if (typeof a !== 'number' || typeof b !== 'number') return null;
                    let v = null;
                    switch (t) {
                        case '+': v = a + b; break;
                        case '-': v = a - b; break;
                        case '*': v = a * b; break;
                        case '/': if (b === 0) return null; v = a / b; break;
                        default: return null;
                    }
                    st.push(v);
                }
            }
            if (st.length !== 1) return null;
            const result = st[0];
            if (typeof result !== 'number' || isNaN(result) || !isFinite(result)) return null;
            return Math.round(result * 100) / 100;
        } catch (e) {
            console.error('计算表达式异常:', e);
            return null;
        }
    }

    /**
     * 处理计算结果：与目标数字比对，决定是否消除
     */
    handleCalculationResult(result, expression) {
        console.log(`计算完成: ${expression} = ${result}`);
        
        // 获取TopBar中的目标数字
        const topBar = this.uiManager?.components?.topBar;
        if (!topBar || !topBar.targetNumbers) {
            console.log('无法获取目标数字，仅显示结果');
            this.showCalculationResult(result, expression, false);
            return;
        }
        
        // 检查结果是否匹配任一目标数字
        const matchedTarget = topBar.targetNumbers.find(target => target === result);
        
        if (matchedTarget !== undefined) {
            // 匹配成功：执行消除逻辑
            console.log(`✅ 结果 ${result} 匹配目标数字 ${matchedTarget}，执行消除！`);
            
            // 清空底部组合区的所有已填充槽位（保留等号槽位）
            this.bottomCalculationArea.slots.forEach(slot => {
                if (!slot.isEqualSign && !slot.isEmpty) {
                    slot.isEmpty = true;
                    delete slot.type;
                    delete slot.value;
                    delete slot.patternIndex;
                    delete slot.patternImage;
                    delete slot.originalCard;
                }
            });
            
            // 标记目标数字为已完成
            if (topBar.markTargetCompleted) {
                topBar.markTargetCompleted(matchedTarget);
            }
            
            // 显示成功消除结果
            this.showCalculationResult(result, expression, true, matchedTarget);
            
            // 检查是否所有目标都已完成
            if (topBar.areAllTargetsCompleted && topBar.areAllTargetsCompleted()) {
                console.log('🎉 恭喜！所有目标数字已完成！');
                // TODO: 触发关卡完成逻辑
            }
        } else {
            // 不匹配：仅显示结果，不消除
            console.log(`❌ 结果 ${result} 不匹配任何目标数字，不执行消除`);
            this.showCalculationResult(result, expression, false);
        }
    }

    /**
     * 显示计算结果（临时：控制台展示，可扩展为UI）
     */
    showCalculationResult(result, expression, isMatched, matchedTarget) {
        console.log('='.repeat(48));
        if (isMatched) {
            console.log('🎯 计算成功并消除');
            console.log(`表达式: ${expression}`);
            console.log(`结果: ${result}`);
            console.log(`匹配目标: ${matchedTarget}`);
            console.log('✅ 已清空底部组合区');
        } else {
            console.log('📊 计算结果');
            console.log(`表达式: ${expression}`);
            console.log(`结果: ${result}`);
            console.log('ℹ️  不匹配目标数字，未消除');
        }
        console.log('='.repeat(48));
    }



    /**
     * 处理底部组合区域卡牌点击
     */
    handleBottomCardClick(slot, slotIndex) {
        console.log(`[底部卡牌点击] 点击了槽位${slotIndex}的卡牌，值=${slot.value}`);
        
        // 点击底部组合区域的卡牌，移动到备战区
        // 获取 BattleArea 组件
        const battleArea = this.uiManager?.components?.battleArea;
        if (!battleArea) {
            console.error('BattleArea 组件未找到');
            return;
        }
        
        // 调用 BattleArea 的添加方法
        if (battleArea.addCardToBattleArea(slot)) {
            // 成功添加后，将槽位恢复为空状态
            slot.isEmpty = true;
            delete slot.type;
            delete slot.value;
            delete slot.patternIndex;
            delete slot.patternImage;
            delete slot.originalCard;
            
            console.log(`[底部卡牌点击] 卡牌 ${slot.value || '已清空'} 已从底部组合区域移动到备战区，槽位${slotIndex}恢复为空`);
            
            // 触发重新渲染
            this.uiManager?.render();
        } else {
            console.log('备战区已满，无法移动卡牌');
        }
    }

    /**
     * 处理备战区卡牌点击（从 BattleArea 组件调用）
     * 实现数字和符号的交替放置规则：
     * - 数字卡牌：放在奇数位置（索引0,2,4,6,8 对应位置1,3,5,7,9）
     * - 符号卡牌：放在偶数位置（索引1,3,5,7 对应位置2,4,6,8）
     */
    handleSidePanelCardClick(clickedCard) {
        console.log(`[备战区卡牌点击] 点击了备战区卡牌，值=${clickedCard.value}`);
        
        // 检查slots数组是否已初始化
        if (!this.bottomCalculationArea.slots || this.bottomCalculationArea.slots.length === 0) {
            console.error('[备战区卡牌点击] 底部区域槽位未初始化');
            return false;
        }
        
        // 判断卡牌类型：数字 or 符号
        const isNumberCard = typeof clickedCard.value === 'number';
        const cardType = isNumberCard ? '数字' : '符号';
        
        // 根据卡牌类型确定可用的位置索引
        let availablePositions;
        if (isNumberCard) {
            // 数字卡牌：奇数位置（索引0,2,4,6,8）
            availablePositions = [0, 2, 4, 6, 8];
        } else {
            // 符号卡牌：偶数位置（索引1,3,5,7）
            availablePositions = [1, 3, 5, 7];
        }
        
        // 查找第一个空的可用位置
        let emptySlotIndex = -1;
        for (let pos of availablePositions) {
            const slot = this.bottomCalculationArea.slots[pos];
            if (slot && slot.isEmpty && !slot.isEqualSign) {
                emptySlotIndex = pos;
                break;
            }
        }
        
        // 如果没有找到空位置
        if (emptySlotIndex === -1) {
            console.log(`[备战区卡牌点击] 无法移回${cardType}卡牌 ${clickedCard.value}：所有${cardType}位置已满`);
            console.log(`[备战区卡牌点击] ${cardType}卡牌可用位置：${availablePositions.map(i => `位置${i+1}`).join(', ')}`);
            return false;
        }
        
        // 获取 BattleArea 组件
        const battleArea = this.uiManager?.components?.battleArea;
        if (!battleArea) {
            console.error('[备战区卡牌点击] BattleArea 组件未找到');
            return false;
        }
        
        // 从备战区移除卡牌
        const originalBottomCard = battleArea.removeCardFromBattleArea(clickedCard);
        if (!originalBottomCard) {
            console.error('[备战区卡牌点击] 从备战区移除卡牌失败');
            return false;
        }
        
        // 获取空槽位并填充数据
        const slot = this.bottomCalculationArea.slots[emptySlotIndex];
        slot.isEmpty = false;
        slot.type = clickedCard.type;
        slot.value = clickedCard.value;
        slot.patternIndex = clickedCard.patternIndex;
        slot.patternImage = clickedCard.patternImage;
        slot.originalCard = clickedCard.originalBottomCard?.originalCard;
        
        console.log(`[备战区卡牌点击] ${cardType}卡牌 ${clickedCard.value} 已从备战区移回位置${emptySlotIndex + 1}（槽位索引${emptySlotIndex}）`);
        
        // 触发重新渲染
        this.uiManager?.render();
        
        return true;
    }

    /**
     * 处理卡牌点击
     */
    handleCardClick(card) {
        // 这里可以添加卡牌点击的游戏逻辑
        console.log(`选中卡牌: ${card.value}, 类型: ${card.type}, 位置: (${card.baseRow}, ${card.baseCol})`);
        
        // 尝试将卡牌下放到底部区域
        if (this.addCardToBottomArea(card)) {
            // 成功下放后，移除中央区域的卡牌并更新遮挡状态
            this.removeCardAndUpdateBlocking(card.id);
        } else {
            console.log('底部区域已满，无法下放卡牌');
        }
    }

    /**
     * 移除卡牌并更新遮挡状态
     */
    removeCardAndUpdateBlocking(cardId) {
        // 移除卡牌
        const cardIndex = this.centralCardArea.cards.findIndex(card => card.id === cardId);
        if (cardIndex !== -1) {
            const removedCard = this.centralCardArea.cards.splice(cardIndex, 1)[0];
            console.log('移除卡牌:', removedCard.value, '位置:', removedCard.baseRow, removedCard.baseCol);
            
            // 重新计算所有卡牌的遮挡状态（使用新的重叠检测方法）
            this.updateCardBlockingStates();
            
            return true;
        }
        return false;
    }

    /**
     * 检查卡牌是否被其他卡牌遮挡（叠加风格）
     */
    isCardBlockedByOthersInStack(targetCard, layout) {
        // 检查是否有其他卡牌在同一网格位置的更高层级
        for (let otherCard of this.centralCardArea.cards) {
            if (otherCard.id === targetCard.id) continue;
            
            // 如果其他卡牌在同一网格位置且层级更高，则当前卡牌被遮挡
            if (otherCard.baseRow === targetCard.baseRow && 
                otherCard.baseCol === targetCard.baseCol && 
                otherCard.stackLevel > targetCard.stackLevel) {
                return true;
            }
        }
        
        return false;
    }

    /**
     * 检查卡牌是否被其他卡牌遮挡（原方法）
     */
    isCardBlockedByOthers(targetCard, layout) {
        // 检查是否有其他卡牌在上方遮挡
        for (let otherCard of this.centralCardArea.cards) {
            if (otherCard.id === targetCard.id) continue;
            
            // 如果其他卡牌在上方同一列，则当前卡牌被遮挡
            if (otherCard.baseCol === targetCard.baseCol && otherCard.baseRow < targetCard.baseRow) {
                return true;
            }
        }
        
        return false;
    }

    /**
     * 处理按钮点击
     */
    onButtonClick(button, gameManager) {
        console.log(`点击按钮: ${button.name}`);
        
        switch (button.id) {
            case 'shuffle':
                if (gameManager.cardManager) {
                    gameManager.cardManager.shuffle();
                    console.log('执行洗牌');
                }
                break;
                
            case 'hint':
                console.log('显示提示（待实现）');
                // 这里可以实现提示功能
                break;
                
            case 'undo':
                console.log('执行回退（待实现）');
                // 这里可以实现回退功能
                break;
        }
    }

    /**
     * 处理触摸移动事件
     */
    onTouchMove(x, y) {
        // 这里可以实现卡片拖拽功能
        if (this.isDragging && this.draggedCard) {
            this.draggedCard.x = x - this.draggedCard.width / 2;
            this.draggedCard.y = y - this.draggedCard.height / 2;
        }
    }

    /**
     * 处理触摸结束事件
     */
    onTouchEnd() {
        if (this.isDragging) {
            this.isDragging = false;
            this.draggedCard = null;
        }
    }

    /**
     * 处理底部组合区域卡牌点击，移动到左侧备战区
     */
    handleBottomAreaCardClick(x, y) {
        const clickedCard = this.checkBottomAreaClick(x, y);
        if (clickedCard) {
            // 获取左侧备战区组件（BattleArea）
            const battleArea = this.uiManager.components.battleArea;
            if (battleArea) {
                // 尝试添加到备战区
                if (battleArea.addCardToBattleArea(clickedCard)) {
                    // 成功添加后，从底部区域移除
                    const index = this.bottomCalculationArea.items.indexOf(clickedCard);
                    if (index !== -1) {
                        this.bottomCalculationArea.items.splice(index, 1);
                        console.log(`卡牌 ${clickedCard.value} 已从底部区域移动到备战区`);
                    }
                }
            }
        }
    }



    /**
     * 底部区域点击包装（兼容旧调用名）
     */
    handleBottomAreaCardClick(x, y) {
        return this.checkBottomAreaClick(x, y);
    }


    /**
     * 统一的点击事件处理入口
     */
    handleClick(x, y) {
        // 优先处理底部组合区域
        if (this.handleBottomAreaCardClick(x, y)) {
            console.log('[Click] 底部区域已处理');
            return true;
        }

        // 处理中央卡牌区域
        if (this.checkCentralCardClick(x, y)) {
            console.log('[Click] 中央区域已处理');
            return true;
        }

        return false;
    }

    /**
     * 处理中央卡牌区域点击
     */
    handleCentralAreaClick(x, y) {
        // 检查中央卡牌区域的点击
        for (let card of this.centralCardArea.cards) {
            if (card.x && card.y && card.width && card.height) {
                if (x >= card.x && x <= card.x + card.width &&
                    y >= card.y && y <= card.y + card.height) {
                    
                    // 检查卡牌是否被遮挡
                    if (!card.isBlocked) {
                        this.handleCardClick(card);
                        break;
                    }
                }
            }
        }
    }

    /**
     * 处理触摸开始事件（UIManager调用）
     */
    onTouchStart(x, y) {
        console.log(`[GameBoard] 收到点击事件: (${x.toFixed(2)}, ${y.toFixed(2)})`);

        // 转换为相对于GameBoard的坐标
        const relativeX = x - (this.layout ? this.layout.x : 0);
        const relativeY = y - (this.layout ? this.layout.y : 0);

        // 调用统一的点击处理方法并返回结果
        return this.handleClick(x, y);
    }

    /**
     * 洗牌功能：随机重排中央游戏区域的卡牌
     */
    shuffleCentralCards() {
        console.log('=== 开始洗牌操作 ===');
        
        // 调试：显示卡牌总数
        console.log(`[洗牌] 中央区域卡牌总数: ${this.centralCardArea.cards.length}`);
        
        // 统计可见卡牌数量
        const visibleCount = this.centralCardArea.cards.filter(card => card.isVisible).length;
        
        if (visibleCount === 0) {
            console.log('[洗牌] 没有可洗牌的卡牌');
            return;
        }
        
        console.log(`[洗牌] 找到 ${visibleCount} 张未消除的卡牌`);
        
        // 记录洗牌前的前5张卡牌信息（用于调试）
        const beforeShuffle = this.centralCardArea.cards.slice(0, 5).map((card, idx) => 
            `[${idx}]${card.value}@(${Math.round(card.x)},${Math.round(card.y)})`
        );
        console.log('[洗牌前] 前5张卡牌:', beforeShuffle.join(', '));
        
        // 步骤1: 保存所有卡牌的位置信息
        const cards = this.centralCardArea.cards;
        const positions = cards.map(card => ({
            x: card.x,
            y: card.y,
            baseRow: card.baseRow,
            baseCol: card.baseCol,
            stackLevel: card.stackLevel,
            gridIndex: card.gridIndex
        }));
        
        // 步骤2: 使用 Fisher-Yates 算法打乱卡牌数组
        for (let i = cards.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            // 直接交换数组中的卡牌对象
            [cards[i], cards[j]] = [cards[j], cards[i]];
        }
        
        // 步骤3: 将原位置信息重新分配给打乱后的卡牌（实现位置随机）
        cards.forEach((card, index) => {
            card.x = positions[index].x;
            card.y = positions[index].y;
            card.baseRow = positions[index].baseRow;
            card.baseCol = positions[index].baseCol;
            card.stackLevel = positions[index].stackLevel;
            card.gridIndex = positions[index].gridIndex;
            card.zIndex = index; // 更新 zIndex
        });
        
        // 记录洗牌后的前5张卡牌信息（用于调试）
        const afterShuffle = this.centralCardArea.cards.slice(0, 5).map((card, idx) => 
            `[${idx}]${card.value}@(${Math.round(card.x)},${Math.round(card.y)})`
        );
        console.log('[洗牌后] 前5张卡牌:', afterShuffle.join(', '));
        
        // 统计位置变化
        let movedCount = 0;
        for (let i = 0; i < Math.min(5, beforeShuffle.length); i++) {
            if (beforeShuffle[i] !== afterShuffle[i]) {
                movedCount++;
            }
        }
        console.log(`[洗牌] 前5张卡牌中有 ${movedCount} 张位置发生变化`);
        
        // 更新卡牌遮挡状态
        this.updateCardBlockingStates();
        
        console.log('=== 洗牌操作完成 ===');
        
        // 触发重新渲染
        if (this.uiManager && typeof this.uiManager.render === 'function') {
            this.uiManager.render();
        }
    }
}
